<template>
    <div class="warp" ref="elRef" :style="{height: height,width: width}"></div>
</template>

<script setup>
  //引入echarts图表
  import * as echarts from 'echarts'
  import {ref,defineProps,watch,watchEffect,onMounted,onUnmounted} from 'vue';

  let myEcharts = echarts,
    elRef = ref(null);
  const props = defineProps({
    "height":{
      default: '100%'
    },
    "width": {
      default: '100%'
    },
    "options": {
      default: {}
    }
  });

  watch(() => props.options.source,(val) => {
    initChart();
  })
  let chart = null;
  function initChart(){
    let {title,type,source,xAxis} = props.options,
      option = {
        title: {
          text: title,
        },
        tooltip: {
          trigger: 'axis'
        },
        dataset: {
          source
        },
        series: [],
        xAxis: {},
        yAxis: {},
        legend: {
          orient: 'horizontal'
        },
      };
    if (!source)return;
    if (xAxis) {
      option.xAxis = { type: 'category'}
    }else {
      option.yAxis = { type: 'category'}
    }
    for (let i = 1; i < source[0].length; i++) {
      option.series.push({type})
    }

    chart.setOption(option);
  }
  onMounted(() =>{
    chart = myEcharts.init(elRef.value, "purple-passion");
    initChart();
  });
  onUnmounted(() => {
    myEcharts.dispose;
  });

</script>

<style scoped>
</style>
